<template>
  <div class="login">
    <div class="login-div">
      <div class="logo"><img src="../assets/img/logo.png" alt="" /></div>
    </div>
    <div class="login-div-form">
      <div class="login-div-form-top">
        <span>登录账户</span>
      </div>
      <form action="">
        <div class="input">
          <span></span>
          <input
            type="text"
            v-model="userName"
            value=""
            placeholder="用户名/账号/手机号"
            class="username"
          />
        </div>
        <div class="input">
          <span></span>
          <input
            type="password"
            v-model="passWord"
            value=""
            placeholder="请输入账户密码"
            autocomplete="off"
            class="password"
          />
        </div>
        <div class="input yzm">
          <span></span>
          <input type="text" placeholder="请输入图片验证码" class="yzma" />
          <div class="yzm-div" @click="refreshCode">
            <Sidentify :identifyCode="identifyCode" />
          </div>
        </div>
        <button type="button" class="submit" @click="handlelogin">
          立即登录
        </button>
      </form>
      <div class="login-div-form-a">
        <span>
          <span>还没账户？</span>
          <router-link to="/register">立即注册</router-link>
        </span>
        <span>
          <span>忘记密码？</span>
          <a>找回密码</a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import Sidentify from "./Sidentify/Sidentify.vue";
export default {
  components: { Sidentify },
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",
      code: "", //text框输入的验证码
      userName: "",
      passWord: "",
      UserList: [],
    };
  },
  methods: {
    //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    handlelogin() {
      let { userName, passWord, UserList } = this;
      UserList = this.$store.state.use.user;
      let userNameArr = [];
      let passWordArr = [];
      for (var i = 0; i < UserList.length; i++) {
        userNameArr.push(UserList[i].username);
        passWordArr.push(UserList[i].password);
      }
      if (userNameArr.indexOf(userName) === -1) {
        alert("账户不存在");
      } else {
        var index = userNameArr.indexOf(userName);
        if (passWordArr[index] === passWord) {
          alert("登录成功！");
          this.$router.push("/");
          localStorage.setItem('name',userName)
        } else {
          alert("密码错误！");
        }
      }
    },
  },
  created() {
    //初始化验证码
    this.refreshCode();
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>

<style lang="less" scoped >
@import url("../assets/css/reset.css");
@import url("../assets/css/login.css");
</style>